import React from 'react';
import ReactDom from 'react-dom';
import Wangeditor from './editer';
import Header from './header';
import Footer from './footer';
import {Button,Menu,Modal,Icon,Tabs,message,Form,Input,CheckBox,Select,} from 'antd';
const Option = Select.Option;
import 'antd/dist/antd.css';
const FormItem = Form.Item;
const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane;
const MenuItemGroup = Menu.MenuItemGroup;
import { Row,Col } from 'antd';
import {Router, Route, Link, browserHistory} from 'react-router';
var AdminCss  =  require("../../../css/admin.css");
import Login from './login';

export default class Index extends React.Component{
	constructor(){
		super();
		this.state={
			style:"",
			author:localStorage.username,
			content:""
		}
	};
	
	handleChange(value) {
        this.setState({style:value});
    };
    createMarkup() {
    	return {__html:this.state.content}
    }
    componentWillMount() {
    	var myFetchOptions ={
			method:'GET'
		};
    	var res = fetch("/admin/select?conut=10",myFetchOptions);
        res.then(response => response.json()).then(json=>{
      	if(json.state){
      		var con="";
      		for(var i=0;i<json.mes.length;i++){
      		    con+="<tr><td>"+json.mes[i].title+"</td><td>"+json.mes[i].author+"</td><td>"+json.mes[i].type+"</td><td>"+json.mes[i].text+"</td><td class=\"del\" data-id="+json.mes[i]._id+">删除</td></tr>";
      		}
      		this.setState({content:con});
      	}else{
      		message.error(json.mes);
      	}
      });
    };
    Artsubmit() {
        var text = encodeURI(editor.children[1].children[0].innerHTML);
        var title = document.getElementsByName('arttitle')[0].value;

        var res = fetch("/admin/insert",{
      	method:"post",
      	headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
      	body:"title="+title+"&author="+this.state.author+"&type="+this.state.style+"&text="+text,
      	});
      res.then(response => response.json()).then(json=>{
      	if(json.state){
      		message.success(json.mes);
      	}else{
      		message.error(json.mes);
      	}
      });
    };
    delArc(e) {
    	e.preventDefault();
    	var articleId = e.target.getAttribute('data-id');
    	var res = fetch("/admin/delete",{
    		method:"post",
    		headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
    		body:"articleId="+articleId
    	});
    	res.then(response=>response.json()).then(json=>{
    		if(json.state){
	      		message.success(json.mes);
	      	}else{
	      		message.error(json.mes);
	      	}
    	});
    };
	render(){
		const indexStyle = {
			table:{
				textAlign:"center",
				width:"100%",
				height:"60px",
				border:"1px solid #ccc",
				align:"center",
				cellpadding:0,
				cellspacing:0
			}
	    };
		return (
			<div>
			    <Header/>
			    <Row id="adminCon">
			        <Col span={2}></Col>
			        <Col span={20}>
						<Tabs defaultActiveKey="1" tabPosition="left">
                            <TabPane tab={<span><Icon type="edit" />添加文章</span>} key="1">
                                <Input placeholder="标题" name="arttitle"/>
                                <div id="wangeditor"><Wangeditor/></div>
                                <Select id={AdminCss.selBtn} showSearch placeholder="分类" style={{ width: 150 }} onChange={this.handleChange.bind(this)}>
							      <Option value="web">前端</Option>
							      <Option value="node">后端</Option>
							      <Option value="algorithm">算法&数据结构</Option>
							      <Option value="frame">框架</Option>
							      <Option value="essay">随笔</Option>
							    </Select>
							    <Button onClick={this.Artsubmit.bind(this)} style={{width:100}}>提交</Button>
   							</TabPane>
    						<TabPane tab={<span><Icon type="usergroup-delete" />所有文章</span>} key="2">
      							<table style={indexStyle.table} dangerouslySetInnerHTML={this.createMarkup()} onClick={this.delArc.bind(this)}></table>
    						</TabPane>
  						</Tabs>
			        </Col>
			        <Col span={2}></Col>
			    </Row>
			    <Footer/>
			</div>
		);
	}
}